let $user_table;
window.onload = function () {
    init_user_table();
    $("#btn_refresh").click(function () {
        //点击查询是 使用刷新 处理刷新参数
        $('#user_table').bootstrapTable('refresh');
    });
}

function init_user_table() {
    $user_table = $('#user_table').bootstrapTable({
        url: '/demo02_userManage_war/getUserTable',
        method: "post",
        search: true,                      //是否显示表格搜索
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,
        pageSize: 10,                     //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        pagination: true,                   //是否显示分页（*）
        height: 600,
        singleSelect: false,
        contentType: "application/x-www-form-urlencoded",  //发送给服务器的编码类型
        toolbar: '#toolbar',//工具栏
        toolbarAlign: 'left',//工具栏的位置
        //得到查询的参数
        queryParams: function (params) {
            //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            return {
                rows: params.limit,                         //页面大小
                page: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名
                sortOrder: params.order //排位命令（desc，asc）
            };
        },

        columns: [{
            field: 'uid',
            title: '用户id',
            width: 20,
        }, {
            field: 'uname',
            title: '用户名',
            width: 100,
        }, {
            field: 'hobby',
            title: '用户兴趣',
            width: 200,
        }, {
            field: 'ID',
            title: '操作',
            width: 150,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter
        },]
    });
}

function actionFormatter(value, row, index) {
    let id = value;
    let result = `
        <button type="button" class="btn btn-success" onclick="">查看</button>
        <button type="button" class="btn btn-primary" onclick="openUserInfoModal(${row.uid},'${row.uname}','${row.hobby}')" 
                data-toggle="modal" data-target="#update_user_info_modal">修改</button>
        <button type="button" class="btn btn-danger" onclick="deleteUserById(${row.uid})">删除</button>
    `;
    return result;
}

function openUserInfoModal(...values) {
    let row={
        uid:values[0],
        uname:values[1],
        hobby:values[2],
    }
    let update_user_info_modal_body = document.getElementById("update_user_info_modal_body");
    let update_user_info_modal_footer = document.getElementById("update_user_info_modal_footer");
    update_user_info_modal_body.innerHTML = `
        <div class="form-group">
            <label for="uname-au">用户名</label>
            <input type="text" class="form-control" id="uname-upu" name="uname" value="${row.uname}">
            <small id="emailHelp" class="form-text text-muted">这是用户名</small>
        </div>
        <div class="form-group">
            <label for="hobby-au">兴趣爱好</label>
            <input type="text" class="form-control" id="hobby-upu" name="hobby" value="${row.hobby}">
        </div>
    `;
    update_user_info_modal_footer.innerHTML = `
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="update_user_info_btn">提交修改</button>
    `;
    let update_user_info_btn = document.getElementById("update_user_info_btn");
    update_user_info_btn.onclick = () => {
        updateUserInfo(row);
    }
}

function updateUserInfo(row) {
    $.post("/demo02_userManage_war/updateUserInfo", {
        uid: row.uid,
        uname: $('#uname-upu').val(),
        hobby: $('#hobby-upu').val(),
    }, (res, status) => {
        console.log(res);
        $user_table.bootstrapTable('refresh');
    })
}

function deleteUserById(uid) {
    $.post("/demo02_userManage_war/delete_user", {
        uid: uid,
    }, (res, status) => {
        res = JSON.parse(res);
        alert(res.msg);
        $user_table.bootstrapTable('refresh');
    });
}
